<template>
	<view id="barter-list">
		<view class="barter-ul" v-if="barterArr.length > 0">
			<view class="barter-li" v-for="(item,index) in barterArr" :key="item.goodsId" @click="toRouter(item.goodsId)">
				<image class="li-img" :src="item.goodsImg" mode=""></image>
				<view class="li-text">
					<view class="title">{{item.goodsName}}</view>
					<view class="tip-btn">以物换物</view>
					<view class="li-price">价值：￥{{item.shopPrice || 0}}</view>
				</view>
			</view>
		</view>
		<view class="no-ul" v-else>
			--暂无更多数据--
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			barterArr: [],
			page: 1,
			totalPage: false,
		};
	},
	onNavigationBarButtonTap(e) {
		if (e.float == 'right') {
			uni.navigateTo({
				url: `/pages/barter/mine`
			})
		}
	},
	onLoad() {

	},
	components: {

	},
	onShow() {
		this.page = 1;
		this.totalPage = false;
		this.getList();
	},
	methods: {
		// 跳转详情
		toRouter(cid){
			uni.navigateTo({
				url: '/pages/barter/detail?cid='+cid
			})
		},
		// 获取列表
		getList(){
			this.$Request.request('/api/goods/getBarterGoodsList','get',{p:this.page}).then((res)=>{
				if(res.status == 1){
					let result = res.data;
					if(result.list.length == 0 || !result.list){
						return this.totalPage = true;
					}
					if(this.page == 1){
						this.barterArr = result.list;
					}else {
						this.barterArr.push(...result.list);
					}
				}
			})
		},
	},
	onReachBottom() {
		if (this.totalPage) return
		this.page++
		this.getList()
	},
};
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>

<style scoped lang="scss">
	.barter-ul {
		width: 100%;
		padding: 16rpx 12rpx 100rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		flex-wrap: wrap;
		grid-column-gap: 10rpx;
		grid-row-gap: 16rpx;
		// justify-content: space-between;
		.barter-li {
			// width: calc(100% / 2 -20rpx);
			border-radius: 16rpx;
			background: #fff;
			.li-img {
				width: 100%;
				height: 358rpx;
			}
			.li-text {
				width: 100%;
				padding: 8rpx 12rpx 18rpx;
				box-sizing: border-box;
				.title {
					font-size: 26rpx;
					color: #1D1E22;
					line-height: 36rpx;
					@include nowraps(2);
					margin-bottom: 14rpx;
				}
				.tip-btn {
					width: 124rpx;
					height: 32rpx;
					text-align: center;
					background: #FFDA3B;
					font-size: 20rpx;
					color: #1D1E22;
					line-height: 28rpx;
					margin-bottom: 18rpx;
					border-radius: 4rpx;
				}
				.li-price {
					font-size: 28rpx;
					color: #EE486C;
					line-height: 40rpx;
				}
			}
		}
	}
</style>
